<template>
    <el-dialog v-model="state.isShowDialog" width="70%" center>
        <template #title>
            <div style="font-size: large"
                v-drag="['.system-partner-container .el-dialog', '.system-partner-container .el-dialog__header']">
                {{ state.title }}
            </div>
        </template>
        <form-create v-model="formData" v-model:api="state.fApi" :rule="state.rule"
            :option="state.option"></form-create>

    </el-dialog>
</template>
<script setup>
import { reactive, defineProps, defineExpose } from 'vue';
import { get } from "@/api/public/basic";
import { ElMessage } from 'element-plus';


const props = defineProps({
    listId: {
        type: String,
        default: ''
    },
})

const state = reactive({
    //实例对象
    fApi: {},
    //表单数据
    formData: {},
    //表单生成规则
    rule: [],
    //组件参数配置
    option: {

    },
    title: '',
    isShowDialog: false,
})



const openDialog = (pageId) => {

    get(pageId, props.listId).then((response) => {
        if (response.code == 200) {
            const data = response.data && response.data[0];
            state.title = data.title;

            if (data.template) {
                const templateParse = JSON.parse(data.template);
                state.rule = templateParse.rule;
                state.option = templateParse.options;
                state.isShowDialog = true;
            }
        } else {
            ElMessage.error(response.msg);
        }
    });



};


defineExpose({
    openDialog,
});

</script>